<template>
	<div style="width: 100%">
		<el-input
			ref="input"
			v-model="money"
			clearable
			v-bind="$attrs"
			@blur="blur"
			v-on="handleEvents"
			:size="size"></el-input>
	</div>
</template>

<script>
	export default {
		components: {},
		props: {
			value: {
				required: false,
			},

			min: {
				required: false,
				type: Number,
			},
			max: {
				required: false,
				type: Number,
			},
			size: {
				required: false,
				type: String,
			},
			handleEvents: {
				required: false,
				type: Object,
			},
			formData: {
				required: false,
				type: Object,
			},
			index: {
				required: false,
				type: Number,
			},
			thousands: {
				required: true,
				type: Function,
			},
		},
		data() {
			return {
				money: 0,
			};
		},

		beforeDestroy() {},
		watch: {
			value(val) {
				// this.money = val;
			},
		},
		mounted() {},
		methods: {
			focus() {
				this.noThousands(this.money);
				if (this?.handleEvents?.on?.focus) {
					this?.handleEvents?.on?.focus?.({
						row: this.formData,
						index: this.index,
						val: this._.cloneDeep(this.val),
					});
				}
			},
			blur() {
				this.boundValid();
				this.$emit('input', this.money);
				if (this?.handleEvents?.on?.blur) {
					this?.handleEvents?.on?.blur?.({
						row: this.formData,
						index: this.index,
						val: this._.cloneDeep(this.value),
					});
				}
				// 操作完成后转为千分位
				this.toThousands(this.money);
			},
			// 边界验证
			boundValid() {
				if (
					this.money !== null &&
					this.money !== undefined &&
					this.money !== ''
				) {
					let money = this.money.replace(/\,/g, '');
					if (money > this.max) {
						this.money = this.max;
					}
					if (money < this.min) {
						this.money = this.min;
					}
				}
			},
			toThousands(val) {
				this.money = this.thousands(val);
			},
			noThousands(val) {
				this.money = val.replace(/\,/g, '');
			},
		},
	};
</script>

<style></style>
